<template>
  <div class="login-page">
    <div class="login-container">
      <h2>{{ isLoginMode ? '登录' : '注册' }}</h2>

      <form @submit.prevent="handleSubmit" class="login-form">
        <div class="form-group">
          <label>用户名</label>
          <input
              v-model="form.username"
              type="text"
              required
              placeholder="请输入用户名"
          >
        </div>

        <div class="form-group">
          <label>密码</label>
          <input
              v-model="form.password"
              type="password"
              required
              placeholder="请输入密码"
              minlength="6"
          >
        </div>


        <button type="submit" :disabled="loading" class="submit-btn">
          {{ loading ? '处理中...' : (isLoginMode ? '登录' : '注册') }}
        </button>
      </form>

      <div class="form-footer">
        <a href="#" @click.prevent="toggleMode" class="mode-toggle">
          {{ isLoginMode ? '没有账号？立即注册' : '已有账号？立即登录' }}
        </a>

        <a href="#" @click.prevent="showForgotPassword = true" class="forgot-password">
          忘记密码？
        </a>
      </div>

      <!-- 第三方登录 -->
      <div class="social-login">
        <div class="divider">或使用第三方账号登录</div>
        <button class="social-btn google" @click="socialLogin('google')">
          Google
        </button>
        <button class="social-btn github" @click="socialLogin('github')">
          GitHub
        </button>
      </div>

      <!-- 忘记密码弹窗 -->
      <div v-if="showForgotPassword" class="modal-overlay" @click="showForgotPassword = false">
        <div class="modal" @click.stop>
          <h3>重置密码</h3>
          <input v-model="resetEmail" type="email" placeholder="请输入注册邮箱">
          <div class="modal-actions">
            <button @click="handleResetPassword">发送重置链接</button>
            <button @click="showForgotPassword = false" class="cancel">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {useUserStore} from '../store/user';
import {ElMessage, ElMessageBox} from 'element-plus';

const router = useRouter();
const userStore = useUserStore();

const isLoginMode = ref(true);
const loading = ref(false);
const showForgotPassword = ref(false);
const resetEmail = ref('');

const form = ref({
  username: '',
  password: ''
});

const toggleMode = () => {
  isLoginMode.value = !isLoginMode.value;
  form.value = {username: '', password: ''};
};

const handleSubmit = async () => {
  loading.value = true;

  try {
    let result;
    if (isLoginMode.value) {
      await userStore.login(form.value);
    } else {
      await userStore.register(form.value);
    }
    ElMessage.success(isLoginMode.value ? '登录成功' : '注册成功');
    if (isLoginMode.value) {
      await useUserStore().initUserData()
    }
    await router.push('/');
  } catch (error) {
    console.log(error)
    ElMessage.error(error.message);
  } finally {
    loading.value = false;
  }
};

const handleResetPassword = async () => {
  if (!resetEmail.value) {
    ElMessage.warning('请输入邮箱');
    return;
  }

  try {
    const result = await userStore.resetPassword(resetEmail.value);
    // 打印重置密码返回的结果
    console.log('重置密码返回结果:', result);

    ElMessage.success('重置密码链接已发送到您的邮箱');
    showForgotPassword.value = false;
    resetEmail.value = '';
  } catch (error) {
    ElMessage.error(error.message);
  }
};

const socialLogin = (provider) => {
  ElMessage.info(`${provider} 登录功能待实现`);
};
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
}

.login-container {
  background: var(--card);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 400px;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--text);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #2d3748;
  border-radius: 6px;
  background: #1a202c;
  color: var(--text);
  font-size: 14px;
}

input:focus {
  outline: none;
  border-color: var(--primary);
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
}

.mode-toggle, .forgot-password {
  color: var(--primary);
  text-decoration: none;
}

.social-login {
  margin-top: 30px;
}

.divider {
  text-align: center;
  color: var(--muted);
  margin-bottom: 20px;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #2d3748;
}

.divider {
  background: var(--card);
  padding: 0 10px;
  display: inline-block;
}

.social-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #2d3748;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.social-btn:hover {
  background: #2d3748;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--card);
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
}

.modal h3 {
  margin-bottom: 20px;
}

.modal input {
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.modal-actions button:first-child {
  background: var(--primary);
  color: white;
}

.modal-actions .cancel {
  background: #4a5568;
  color: var(--text);
}
</style>